<template>
  <div class="pageWrap">
    <el-table ref="table" :data="tableData" style="width: 100%">
      <el-table-column prop="nikeName" label="昵称" width="180"></el-table-column>
      <el-table-column prop="sd" label="反馈时间"></el-table-column>
      <el-table-column prop="sState" label="解决状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button size="mini" @click="toogleExpand(row)">查看详情</el-button>
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column type="expand" width="1">
        <template slot-scope="props">
          <el-form label-position="left" label-width="120">
            <el-form-item label="反馈图片：" v-if="props.row.imgList.length>0">
              <img
                class="feedImg"
                v-for="(v,i) in props.row.imgList"
                :key="i"
                :src="v"
                v-showImgArr="{list:props.row.imgList,ind:i}"
              />
            </el-form-item>
            <el-form-item label="反馈描述：">
              <p>{{ props.row.content?props.row.content:'暂无' }}</p>
            </el-form-item>
            <el-form-item label="解决状态：">
              <el-select v-model="props.row.state" class="iptR" placeholder="请选择解决状态">
                <el-option label="未解决" value="0"></el-option>
                <el-option label="已解决" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="解决说明：">
              <el-input
                class="iptR"
                type="textarea"
                placeholder="请输入内容"
                v-model="props.row.info"
                maxlength="100"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="save(props.row)">保存</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
function timestamp(timestamp) {
  // console.log(timestamp)
  timestamp = Number(timestamp);
  var date = new Date(timestamp);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  var h = date.getHours();
  h = h < 10 ? "0" + h : h;
  var minute = date.getMinutes();
  var second = date.getSeconds();
  minute = minute < 10 ? "0" + minute : minute;
  second = second < 10 ? "0" + second : second;
  return y + "/" + m + "-" + d + " " + h + ":" + minute + ":" + second;
}
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    // 展开行 查看详情
    toogleExpand(row) {
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row);
    },
    init() {
      let s = this.$Base64.encode(
        this.$orgId + "&" + this.$Base64.decode(sessionStorage.getItem("MandA"))
      );
      this.$axios.get("/sbr/getFeedbackList/" + s).then((res) => {
        let rr = res.data.data;
        rr.forEach((v) => {
          v.sd = timestamp(v.time);
          v.sState = v.state == 0 ? "未解决" : "已解决";
          v.imgList = [];
          if (v.quesImg) v.imgList = v.quesImg.split(";");
        });
        this.tableData = rr;
      });
    },
    save(row) {
      // console.log(row);
      let oo = {
        id: row.id,
        state: row.state,
        info: row.info,
      };
      this.$axios.post("/sbr/putFeedback", oo).then((res) => {
        let rr = res.data.data;
        row.sState = row.state == 0 ? "未解决" : "已解决";
        this.$forceUpdate();
      });
    },
  },
  created() {
    this.init();
  },
};
</script>
<style scoped>
.feedImg {
  width: 100%;
  max-width: 100px;
  height: 100%;
  margin-right: 10px;
}

.pageWrap >>> .el-table__expand-column {
  display: none;
}
.iptR {
  float: left;
}
</style>